[V0_FILE]typescriptreact:file="components/Globe.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import * as THREE from "three" import { OrbitControls } from "three/examples/jsm/controls/OrbitControls" import { Color } from "three" export default function Globe() { const mountRef = useRef(null) const [isHighResLoaded, setIsHighResLoaded] = useState(false) const [showHint, setShowHint] = useState(true) useEffect(() => { if (!mountRef.current) return // Create scene, camera, and renderer const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) renderer.setSize(window.innerWidth, window.innerHeight) renderer.setPixelRatio(window.devicePixelRatio) mountRef.current.appendChild(renderer.domElement) // Create a starfield const starsGeometry = new THREE.BufferGeometry() const starsCount = 10000 const positions = new Float32Array(starsCount * 3) for (let i = 0; i < starsCount; i++) { positions[i * 3] = (Math.random() - 0.5) * 2000 positions[i * 3 + 1] = (Math.random() - 0.5) * 2000 positions[i * 3 + 2] = (Math.random() - 0.5) * 2000 } starsGeometry.setAttribute("position", new THREE.BufferAttribute(positions, 3)) const starsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.7, sizeAttenuation: true, }) const stars = new THREE.Points(starsGeometry, starsMaterial) scene.add(stars) // Create an atmospheric glow using a custom shader const atmosphereVertexShader = ` varying vec3 vNormal; void main() { vNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } ` const atmosphereFragmentShader = ` uniform vec3 glowColor; varying vec3 vNormal; void main() { float intensity = pow(0.6 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0); gl_FragColor = vec4(glowColor, 1.0) * intensity; } ` const atmosphereGeometry = new THREE.SphereGeometry(5.2, 32, 32) const atmosphereMaterial = new THREE.ShaderMaterial({ vertexShader: atmosphereVertexShader, fragmentShader: atmosphereFragmentShader, blending: THREE.AdditiveBlending, side: THREE.BackSide, transparent: true, uniforms: { glowColor: { value: new Color(0x3a86ff) }, }, }) const atmosphereMesh = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial) scene.add(atmosphereMesh) // Create wireframe globe const wireframeGeometry = new THREE.SphereGeometry(5, 32, 32) const wireframeMaterial = new THREE.MeshBasicMaterial({ color: 0x3a86ff, wireframe: true, transparent: true, opacity: 0.5, }) const wireframeGlobe = new THREE.Mesh(wireframeGeometry, wireframeMaterial) scene.add(wireframeGlobe) // Create solid globe (initially invisible) const solidGeometry = new THREE.SphereGeometry(4.9, 64, 64) const solidMaterial = new THREE.MeshPhongMaterial({ color: 0x1a237e, transparent: true, opacity: 0, }) const solidGlobe = new THREE.Mesh(solidGeometry, solidMaterial) scene.add(solidGlobe) // Add ambient light const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) scene.add(ambientLight) // Add point light const pointLight = new THREE.PointLight(0xffffff, 1) pointLight.position.set(10, 10, 10) scene.add(pointLight) camera.position.z = 10 const controls = new OrbitControls(camera, renderer.domElement) controls.enableDamping = true controls.dampingFactor = 0.05 controls.rotateSpeed = 0.5 controls.enableZoom = false const colors = [ new Color(0x3a86ff), // Blue new Color(0x8338ec), // Purple new Color(0xff006e), // Pink new Color(0xfb5607), // Orange new Color(0xffbe0b), // Yellow ] let colorIndex = 0 let nextColorIndex = 1 let colorT = 0 const colorTransitionSpeed = 0.005 const lerpColor = (a: Color, b: Color, t: number) => { const color = new Color() color.r = a.r + (b.r - a.r) * t color.g = a.g + (b.g - a.g) * t color.b = a.b + (b.b - a.b) * t return color } let animationId: number const animate = () => { animationId = requestAnimationFrame(animate) // Color transition logic colorT += colorTransitionSpeed if (colorT >= 1) { colorT = 0 colorIndex = nextColorIndex nextColorIndex = (nextColorIndex + 1) % colors.length } const currentColor = lerpColor(colors[colorIndex], colors[nextColorIndex], colorT) // Update materials with new color if (wireframeGlobe.material instanceof THREE.MeshBasicMaterial) { wireframeGlobe.material.color = currentColor } if (solidGlobe.material instanceof THREE.MeshPhongMaterial) { solidGlobe.material.color = currentColor } if (atmosphereMesh.material instanceof THREE.ShaderMaterial) { atmosphereMesh.material.uniforms.glowColor.value = currentColor } // Rotate the globes, atmosphere, and starfield for dynamic effect wireframeGlobe.rotation.y += 0.001 solidGlobe.rotation.y += 0.001 atmosphereMesh.rotation.y += 0.0005 stars.rotation.y += 0.0001 controls.update() renderer.render(scene, camera) } animate() // Load high-resolution textures const textureLoader = new THREE.TextureLoader() const loadTexture = (url: string) => new Promise((resolve) => { textureLoader.load(url, (texture) => resolve(texture)) }) Promise.all([ loadTexture("/earth-texture-compressed.jpg"), loadTexture("/earth-bump-compressed.jpg"), loadTexture("/earth-specular-compressed.jpg"), ]).then(([texture, bumpMap, specularMap]) => { const highResMaterial = new THREE.MeshPhongMaterial({ map: texture as THREE.Texture, bumpMap: bumpMap as THREE.Texture, bumpScale: 0.05, specularMap: specularMap as THREE.Texture, specular: new THREE.Color("grey"), }) // Transition to the high-res textured globe const transitionDuration = 1 // seconds const startTime = Date.now() const transitionToHighRes = () => { const elapsedTime = (Date.now() - startTime) / 1000 const progress = Math.min(elapsedTime / transitionDuration, 1) solidGlobe.material = highResMaterial solidGlobe.material.opacity = progress wireframeMaterial.opacity = 0.5 * (1 - progress) if (progress < 1) { requestAnimationFrame(transitionToHighRes) } else { setIsHighResLoaded(true) scene.remove(wireframeGlobe) } renderer.render(scene, camera) } transitionToHighRes() }) const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) } window.addEventListener("resize", handleResize) const hintTimer = setTimeout(() => { setShowHint(false) }, 3000) // Hide hint after 3 seconds return () => { window.removeEventListener("resize", handleResize) cancelAnimationFrame(animationId) mountRef.current?.removeChild(renderer.domElement) controls.dispose() clearTimeout(hintTimer) } }, []) return (

{showHint && (

Drag to explore

)}

) } [V0_FILE]typescriptreact:file="components/Contact.tsx" isMerged="true" "use client" import type React from "react" import { motion } from "framer-motion" import { useState } from "react" export default function Contact() { const [formState, setFormState] = useState({ name: "", email: "", message: "" }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission here console.log(formState) } const handleChange = (e: React.ChangeEvent) => { setFormState({ ...formState, [e.target.name]: e.target.value }) } return (

Get in Touch

Name

Message

Send Message

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); background: rgb(var(--background-start-rgb)); overflow: hidden; } * { backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/GlobeClient.tsx" 'use client' import dynamic from 'next/dynamic' import { Suspense } from 'react' const Globe = dynamic(() => import('@/components/Globe'), { ssr: false }) export default function GlobeClient() { return ( }> ) } [V0_FILE]typescriptreact:file="app/page.tsx" import GlobeClient from "@/components/GlobeClient" export default function Home() { return (

) } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "three": "0.182.0", "framer-motion": "12.31.1" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } }

About

Tags

Share

About

Tags

Share

More from chinpeerapat

More Templates Like This